<template>
	<view class="housekeeping-wrapper">
		<custom-header-bar title="家政" bg="1"></custom-header-bar>
		<div class="content-box">
			<div class="inner">
				<div class="title">
					<div class="line"></div>
					<div class="text">精选家政</div>
				</div>
				<div class="shaixuan-wrapper">
					<div class="item" @click="shaixuanPopup('fwnr')" :class="{ active: shaixuan.fwnr !== '' }">
						<div class="text">服务内容</div>
						<image src="/static/icon-trangle-gray.png" mode="aspectFit" class="image gray"></image>
						<image src="/static/icon-trangle.png" mode="aspectFit" class="image green"></image>
					</div>
					<div class="item" @click="shaixuanPopup('fwlx')" :class="{ active: shaixuan.fwlx !== '' }">
						<div class="text">服务类型</div>
						<image src="/static/icon-trangle-gray.png" mode="aspectFit" class="image gray"></image>
						<image src="/static/icon-trangle.png" mode="aspectFit" class="image green"></image>
					</div>
					<div class="item" @click="shaixuanPopup('nlyq')" :class="{ active: shaixuan.nlyq !== '' }">
						<div class="text">年龄要求</div>
						<image src="/static/icon-trangle-gray.png" mode="aspectFit" class="image gray"></image>
						<image src="/static/icon-trangle.png" mode="aspectFit" class="image green"></image>
					</div>
					<div class="item" @click="shaixuanPopup('gdxx')" :class="{ active: shaixuan.gzjy !== '' }">
						<div class="text">更多选项</div>
						<image src="/static/icon-trangle-gray.png" mode="aspectFit" class="image gray"></image>
						<image src="/static/icon-trangle.png" mode="aspectFit" class="image green"></image>
					</div>
				</div>
				<div class="list-wrapper" v-for="(item, index) in Housekeep" :key="index"
					style="border-bottom: 1px solid rgba(0, 0, 0, 0.1)">
					<div class="item-wrapper" @click="toHoudekeepingDetail(item.id)">
						<image :src="item.iconUrl" class="photo" mode="aspectFill"></image>
						<div class="info-wrapper">
							<div class="name-address">
								<span class="name">{{ item.name }}</span>
								<span class="address" style="margin-left: 15upx">{{ item.addressOneStr }}{{ item.addressTwoStr
                  }}</span>
							</div>
							<div class="work-info">
								<div class="item" v-if="item.yearNum">{{ item.yearNum }}年</div>
								<div class="item" v-if="item.contents">{{ item.contents }}</div>
								<div class="item" v-if="item.age">{{ item.age }}岁</div>
							</div>
							<div class="money">
								<div class="rmb">¥</div>
								<div class="num">{{ item.serveMoney }}</div>
								<div class="danwei">{{ item.serveMoneyStr }}</div>
								<div class="server-type" v-if="item.serveType===1">（住家）</div>
								<div class="server-type" v-if="item.serveType===2">（白班）</div>
								<div class="server-type" v-if="item.serveType===3">（钟点工）</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<image mode="aspectFit" class="kf" :src="PictureUrl + 'image-kf.png'" @click="daphone"></image>
		<custom-tab-bar selected="2"></custom-tab-bar>
		<div class="uni-popup" v-if="shaixuanType !== ''">
			<div class="top" @click="hideShaixuan"></div>
			<div class="content-wrapper">
				<div class="shaixuan-wrapper">
					<div class="item" @click="shaixuanPopup('fwnr')" :class="{ active: shaixuanType == 'fwnr' }">
						<div class="text">服务内容</div>
						<image src="/static/icon-trangle-gray.png" mode="aspectFit" class="image gray"></image>
						<image src="/static/icon-trangle.png" mode="aspectFit" class="image green"></image>
					</div>
					<div class="item" @click="shaixuanPopup('fwlx')" :class="{ active: shaixuanType == 'fwlx' }">
						<div class="text">服务类型</div>
						<image src="/static/icon-trangle-gray.png" mode="aspectFit" class="image gray"></image>
						<image src="/static/icon-trangle.png" mode="aspectFit" class="image green"></image>
					</div>
					<div class="item" @click="shaixuanPopup('nlyq')" :class="{ active: shaixuanType == 'nlyq' }">
						<div class="text">年龄要求</div>
						<image src="/static/icon-trangle-gray.png" mode="aspectFit" class="image gray"></image>
						<image src="/static/icon-trangle.png" mode="aspectFit" class="image green"></image>
					</div>
					<div class="item" @click="shaixuanPopup('gdxx')" :class="{ active: shaixuanType == 'gdxx' }">
						<div class="text">更多选项</div>
						<image src="/static/icon-trangle-gray.png" mode="aspectFit" class="image gray"></image>
						<image src="/static/icon-trangle.png" mode="aspectFit" class="image green"></image>
					</div>
				</div>
				<div class="content" v-if="shaixuanType === 'fwnr'">
					<div class="title">服务内容</div>
					<div class="list-wrapper">
						<div class="item-wrapper" v-for="(item, index) in FWNR" :key="index">
							<div class="inner" @click="shaixuan.fwnr = item.id"
								:class="{ active: item.id == shaixuan.fwnr }">
								{{ item.name }}
							</div>
						</div>
					</div>
				</div>
				<div class="content" v-if="shaixuanType === 'fwlx'">
					<div class="title">服务类型</div>
					<div class="list-wrapper">
						<div class="item-wrapper" v-for="(item, index) in FWLX" :key="index">
							<div class="inner" @click="shaixuan.fwlx = item.id"
								:class="{ active: item.id == shaixuan.fwlx }">
								{{ item.name }}
							</div>
						</div>
					</div>
				</div>
				<div class="content" v-if="shaixuanType === 'nlyq'">
					<div class="title">年龄要求</div>
					<div class="list-wrapper">
						<div class="item-wrapper" v-for="(item, index) in NLYQ" :key="index">
							<div class="inner" @click="shaixuan.nlyq = item.id"
								:class="{ active: item.id == shaixuan.nlyq }">
								{{ item.name }}
							</div>
						</div>
					</div>
				</div>
				<div class="content" v-if="shaixuanType === 'gdxx'">
					<div class="title">价格区间</div>
					<div style="width: 90%; margin: 0 auto; display: flex; margin-top: 10px">
						<uni-easyinput style="width: 32%" v-model="shaixuan.jiage1" placeholder="请输入价格"
							:inputBorder="true" />
						<span style="padding: 8px 5px 0 5px">至</span>
						<uni-easyinput style="width: 32%" v-model="shaixuan.jiage2" placeholder="请输入价格"
							:inputBorder="true" />
					</div>
					<div class="title" style="margin-top: 10px">工作经验</div>
					<div class="list-wrapper">
						<div class="item-wrapper" v-for="(item, index) in GZJY" :key="index">
							<div class="inner" @click="shaixuan.gzjy = item.id"
								:class="{ active: item.id == shaixuan.gzjy }">
								{{ item.name }}
							</div>
						</div>
					</div>
					<div class="title">地区</div>
					<div @click="showPicker" style="width: 90%; margin: 0 auto; margin-top: 10px">
						<u-input v-model="shaixuan.diqu" disabled type="select" placeholder="请选择所在地区" />
						<!-- <uni-data-picker :localdata="items" popup-title="请选择地区" @change="onchange" @nodeclick="onnodeclick" :map="maps"></uni-data-picker> -->
					</div>
				</div>
				<div class="button-wrapper">
					<div class="reset" @click="reset">
						<image class="image" src="/static/icon-reset.png"></image>
						<div class="text">重置</div>
					</div>
					<button class="button" @click="surebtn">确定</button>
				</div>
				<m-city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue"
					pickerSize="2">
				</m-city>
			</div>
			<div class="mask" @click="hideShaixuan"></div>
		</div>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		Getlist,
		getRegionsById
	} from "@/api/housekeeping";
	import {
		numberList
	} from "@/api/my.js"
	import {
		PICTURE_URL
	} from "../../utils/config.js";
	import gkcity from "@/components/m-city/m-city.vue";

	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import CustomTabBar from "@/components/custom-tab-bar.vue";
	const FWNR = [{
			id: "1",
			name: "做饭",
		},
		{
			id: "2",
			name: "做家务",
		},
		{
			id: "3",
			name: "照顾小孩",
		},
		{
			id: "4",
			name: "照顾老人",
		},
	];
	const FWLX = [{
			id: "1",
			name: "住家",
		},
		{
			id: "2",
			name: "白班",
		},
		{
			id: "3",
			name: "钟点工",
		},
	];
	const NLYQ = [{
			id: "",
			name: "不限",
		},
		{
			id: "0-35",
			name: "35岁以下",
		},
		{
			id: "36-40",
			name: "36-40岁",
		},
		{
			id: "41-45",
			name: "41-45岁",
		},
		{
			id: "46-50",
			name: "46-50岁",
		},
		{
			id: "50-999",
			name: "50岁以上",
		},
	];
	const GZJY = [{
			id: "0-3",
			name: "<3年",
		},
		{
			id: "3-6",
			name: "3-6年",
		},
		{
			id: "6-9999",
			name: ">6年",
		},
	];
	export default {
		components: {
			CustomHeaderBar,
			CustomTabBar,
		},
		data() {
			return {
				imgurl: PICTURE_URL,
				shaixuanType: "",
				FWNR,
				FWLX,
				NLYQ,
				GZJY,
				state: "loading",
				shaixuan: {
					fwnr: "",
					fwlx: "",
					nlyq: "",
					jfqj: "",
					gzjy: "",
					dq: "",
					jiage1: "",
					jiage2: "",
					diqu: "",
				},
				Housekeep: [],
				items: [],
				maps: {
					text: "name",
					value: "id",
					children: "children",
				},
				serveMoneyRange: "",
				list: [{
					id: "",
					localName: "请选择",
					children: [],
				}, ],
				consigneeAddressIdPath: [],
				consigneeAddressPath: [],
				lat: "",
				lon: "",
				phone: "",
			};
		},
		onShow() {
			this.getlist();
		},
		onLoad() {
			setTimeout(() => {
				uni.hideTabBar({
					complete(res) {
						console.log(res)
					}
				})
			}, 300)
			numberList().then((res) => {
				this.phoneNumber=res.data.rows[2].phone
			});
		},
		computed: {
			...mapGetters(["PictureUrl"]),
		},
		methods: {
			// 列表
			getlist() {
				// console.log(this.consigneeAddressIdPath)
				let parse = {
					current: 1,
					size: 10,
					contents: this.shaixuan.fwnr,
					serveType: this.shaixuan.fwlx,
					ageRange: this.shaixuan.nlyq,
					serveMoneyRange: this.serveMoneyRange,
					yearNumRange: this.shaixuan.gzjy,
					addressList: this.consigneeAddressIdPath,
				};
				Getlist(parse).then((res) => {
					if (res.data.data.code == 200) {
						this.Housekeep = res.data.data.rows;
						this.shaixuanType = "";
						this.shaixuan.fwnr = "";
						this.shaixuan.fwlx = "";
						this.shaixuan.nlyq = "";
						this.shaixuan.jiage1 = "";
						this.shaixuan.jiage2 = "";
						this.shaixuan.gzjy = "";
						this.consigneeAddressIdPath = [];
						this.consigneeAddressPath = [];
						this.shaixuan.diqu = "";
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			// 显示筛选条件弹窗
			shaixuanPopup(type) {
				this.shaixuanType = type;
			},
			// 隐藏筛选弹窗
			hideShaixuan() {
				this.shaixuanType = "";
			},
			// 搜索
			surebtn() {
				if (this.shaixuan.jiage1 == "" && this.shaixuan.jiage2 == "") {
					this.serveMoneyRange = "";
				} else {
					this.serveMoneyRange =
						this.shaixuan.jiage1 + "-" + this.shaixuan.jiage2;
				}
				console.log(this.shaixuan.fwnr);

				this.getlist();
			},
			// 三级地址联动回调
			getpickerParentValue(e) {
				// console.log(e)
				// 将需要绑定的地址设置为空，并赋值
				this.consigneeAddressIdPath = [];
				this.consigneeAddressPath = [];
				let name = "";

				e.forEach((item, index) => {
					if (item.id) {
						// 遍历数据
						this.consigneeAddressIdPath.push(item.id);
						// console.log(this.consigneeAddressIdPath)
						this.consigneeAddressPath.push(item.localName);
						// console.log(this.consigneeAddressPath)
						name += item.localName;
						// console.log(name)
						this.shaixuan.diqu = name;
					}
					// if (index == e.length - 1) {
					// 	console.log(item.id)
					// 	//如果是最后一个
					// 	let _town = item.children.filter((_child) => {
					// 		return _child.id == item.id;
					// 	});

					// 	this.lat = _town[0].center.split(",")[1];
					// 	console.log(this.lat)
					// 	this.lon = _town[0].center.split(",")[0];
					// 	console.log(this.lon)
					// }
				});
			},
			// 显示三级地址联动
			showPicker() {
				this.$refs.cityPicker.show();
			},
			// 重置选项
			reset() {
				if (this.shaixuanType === "fwnr") {
					this.shaixuan.fwnr = "";
				}
				if (this.shaixuanType === "fwlx") {
					this.shaixuan.fwlx = "";
				}
				if (this.shaixuanType === "nlyq") {
					this.shaixuan.nlyq = "";
				}
				if (this.shaixuanType === "gdxx") {
					this.shaixuan.jfqj = "";
					this.shaixuan.gzjy = "";
					this.shaixuan.dq = "";
				}
				this.shaixuan.nlyq = "";
				this.shaixuan.jiage1 = "";
				this.shaixuan.jiage2 = "";
				this.serveMoneyRange = "";
				this.shaixuanType = "";
				this.consigneeAddressIdPath = [];
				this.consigneeAddressPath = [];
				this.shaixuan.diqu = "";
				this.getlist();
			},
			// 客服电话
			daphone() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber,
				});
			},
			// 跳转至家政人员详情页面
			toHoudekeepingDetail(id) {
				uni.navigateTo({
					url: "/pages/housekeeping/detail?id=" + id,
				});
			},
		},
	};
</script>

<style lang="scss">
	.housekeeping-wrapper {
		background-color: #f4f4f4;
		padding: 160upx 0 120upx 0;
		box-sizing: border-box;

		.kf {
			position: relative;
			left: 50%;
			margin-left: -120upx;
			width: 240upx;
		}

		.shaixuan-wrapper {
			display: flex;
			padding: 24upx 0;
			border-bottom: 2upx solid #0000001a;

			.item {
				flex: 1;
				display: flex;
				align-items: baseline;
				justify-content: center;

				.text {
					margin-right: 4upx;
					font-size: 28upx;
				}

				.image {
					width: 8upx;
					height: 8upx;
				}

				.gray {
					display: block;
				}

				.green {
					display: none;
				}

				&.active {
					.text {
						color: #29cbb4ff;
					}

					.gray {
						display: none;
					}

					.green {
						display: block;
					}
				}
			}
		}

		.content-box {
			padding: 24upx 24upx 32upx 24upx;

			.inner {
				padding: 30upx;
				background-color: #ffffff;
				border-radius: 30upx;

				.title {
					margin-top: 12upx;
					display: flex;
					align-items: center;
					font-weight: 500;

					.line {
						margin-right: 12upx;
						width: 10upx;
						height: 32upx;
						background: linear-gradient(to bottom, #99f2e94d, #80d7ceff);
					}

					.text {
						color: #484848ff;
						font-size: 36upx;
					}
				}

				.list-wrapper {
					.item-wrapper {
						padding: 24upx 0;
						display: flex;

						.photo {
							margin-right: 24upx;
							width: 140upx;
							height: 180upx;
						}

						.info-wrapper {
							display: flex;
							flex-direction: column;
							justify-content: center;
							width: 0;
							flex: 1;

							.name-address {
								font-size: 32upx;
								color: #484848ff;
							}

							.work-info {
								display: flex;
								margin-top: 24upx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;

								.item {
									height: 28upx;
									line-height: 28upx;
									padding: 0 16upx;
									color: #000000a6;
									font-size: 28upx;
									border-right: 2upx solid #d1d1d6ff;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;

									&:last-child {
										flex-shrink: 0;
										border: none;
									}

									&:first-child {
										flex-shrink: 0;
									}
								}
							}

							.money {
								margin-top: 24upx;
								display: flex;
								align-items: baseline;

								.rmb {
									color: #dc3338;
									font-size: 26upx;
								}

								.num {
									color: #dc3338;
									font-size: 36upx;
								}

								.danwei {
									color: #999999ff;
									font-size: 28upx;
								}
								.server-type{
									color: #999999;
								}
							}
						}
					}
				}
			}
		}

		.uni-popup {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 999;
			display: flex;
			flex-direction: column;

			.top {
				height: 160upx;
			}

			.content-wrapper {
				background-color: #ffffff;

				.content {
					padding: 24upx 0;

					.title {
						padding: 0 24upx;
						font-size: 32upx;
					}

					.list-wrapper {
						padding: 24upx 12upx;
						display: flex;
						flex-wrap: wrap;

						.item-wrapper {
							flex: 0 0 33.3%;
							padding: 12upx;
							box-sizing: border-box;

							.inner {
								background: #f8f8fa;
								border: 2upx solid #f8f8fa;
								border-radius: 4px 4px 4px 4px;
								height: 68upx;
								line-height: 64upx;
								text-align: center;
								font-size: 28upx;
								color: #4e5252ff;
								box-sizing: border-box;

								&.active {
									background: rgba(128, 215, 206, 0.1);
									border: 2upx solid #70dcc1;
									color: #70dcc1ff;
								}
							}
						}
					}
				}

				.button-wrapper {
					border-top: 2upx solid #0000001a;
					padding: 40upx;
					display: flex;

					.reset {
						text-align: center;
						margin-right: 40upx;

						.image {
							width: 30upx;
							height: 30upx;
							vertical-align: middle;
						}

						.text {
							color: #000000bf;
							font-size: 32upx;
						}
					}

					.button {
						flex: 1;
						height: 88upx;
						line-height: 88upx;
						background: #61d7ca;
						border-radius: 88upx;
						color: #ffffff;
						font-size: 32upx;
					}
				}
			}

			.mask {
				flex: 1;
				background-color: #00000099;
			}
		}
	}
</style>
